<template>
    <div class="add-box">
        <div class="left">
            <el-icon>
                <Tickets />
            </el-icon>
            <span>数据列表</span>
        </div>
    </div>


    <!-- 表格 -->
    <div>
        <el-table border ref="multipleTableRef" :data="tableData" style="width: 100%">
            <el-table-column type="selection" />
            <el-table-column prop="id" label="编号">
            </el-table-column>
            <el-table-column property="name" label="秒杀时间段名称 " />

            <el-table-column property="startTime" label="每日开始时间">
                <template #default="scope">
                    {{ fomatDate(scope.row.startTime) }}
                </template>
            </el-table-column>
            <el-table-column property="endDate" label="每日结束时间">
                <template #default="scope">
                    {{ fomatDate(scope.row.endTime) }}
                </template>
            </el-table-column>
            <el-table-column property="productCount" label="商品数量">
            </el-table-column>

            <el-table-column property="Address" label="操作" width="200px">
                <template #default="scope">
                    <el-button type="primary" text size="small" @click="routerFn(scope.row.id)">商品列表</el-button>

                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script setup lang="ts">
import { fomatDate } from "@/utils"
import { user } from "@/api";
import { Tickets } from "@element-plus/icons-vue";
import { reactive, ref, toRefs } from "vue";

import { useRoute, useRouter } from "vue-router"


const route = useRoute()
const router = useRouter()
const ID = Number(route.query.flashPromotionId)

interface IState {
    tableData: IsetShop[]
}
const state = reactive<IState>({
    tableData: []
})

user.setShopApi(ID).then(res => {
    if (res.code === 200) {
        state.tableData = res.data

    }
})

//跳转
const routerFn = (id: number) => {
    router.push(`/sms/flashProductRelation?flashPromotionId=${ID}&flashPromotionSessionId=${id}`)
}
let { tableData } = toRefs(state)
</script>

<style lang="less" scoped>
.add-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px;
    margin-bottom: 20px;
    border: 1px solid gray;

    .left {
        display: flex;
        align-items: center;
        padding: 0 10px;

        .el-icon {
            margin-right: 10px;
        }

    }
}
</style>